<template>
  <main class="main-container">
    <!-- 主菜单 -->
    <div
      class="flex-column d2"
      :style="{ width: '80px', height: clientHeight - 20 + 'px' }"
    >
      <div
        class="dock-item flex-column-center"
        @click="control(item)"
        v-for="(item, index) in data.menu"
        :key="index"
      >
        <img :src="item.src" class="w50" />
        <span class="t">{{ item.name }}</span>
      </div>
    </div>

    <!-- 底部菜单栏 -->
    <div class="dock flex-center" v-if="data.menu.length > 0">
      <div class="d1 flex" style="overflow: hidden">
        <div
          class="dock-item flex-column-center"
          v-for="(item, index) in data.menu"
          :key="index"
          @click="control2"
        >
          <img :src="item.src" class="w50" />
          <span class="t">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </main>

  <div v-for="(item, index) in data.menu" :key="index">
    <IsDragDialog v-model="item.show" closeShow fullShow>
      <template #head>{{ item.name }}</template>
      <div style="margin: 30px">
        <setting v-if="item.zujian == 'setting'"></setting>
        <store v-if="item.zujian == 'store'"></store>
        <message v-if="item.zujian == 'message'"></message>
      </div>
    </IsDragDialog>
  </div>

  <IsDragDialog v-model="data.show2" closeShow fullShow>
    <template #head>我是头酷酷快快快</template>
    <div>我是内容区域</div>
  </IsDragDialog>
</template>

<script setup>
import { login, mockLogin } from "@/api/modules/login";
import IsDragDialog from "../components/IsDragDialog.vue";
import { computed, reactive, onMounted } from "vue";
import Sortable from "sortablejs";
import bus from "../assets/js/utils";

import setting from "../components/setting.vue";
import store from "../components/store.vue";
import message from "../components/message.vue";

// import message from "../components/message.vue";
// import photos from "../components/photos.vue";
// import fitness from "../components/fitness.vue";

let data = reactive({
  menu: [
    {
      src: "https://img.zcool.cn/community/012e155d3e9f78a80120695c13e20a.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
      name: "设置",
      show: false,
      zujian: "setting",
    },
    {
      src: "https://img.zcool.cn/community/01dbb45d3e9f78a8012187f4251c14.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
      name: "商店",
      show: false,
      zujian: "store",
    },
    {
      src: "https://img.zcool.cn/community/0162165d3e9f78a8012187f41b1ffa.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
      name: "信息",
      show: false,
      zujian: "message",
    },
    {
      src: "https://img.zcool.cn/community/01d8605b5d1588a801206a35ebdb06.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
      name: "相册",
      show: false,
      zujian: "photos",
    },
    {
      src: "https://img.zcool.cn/community/01a10c5c88deb1a801208f8bf583ea.png@1280w_1l_2o_100sh.png",
      name: "健身",
      show: false,
      zujian: "fitness",
    },
  ],
  sortData: [],
  clientHeight: 0,
  show: false,
  show2: false,
});

const clientHeight = document.documentElement.clientHeight; //页面的高
console.log("可视高度", clientHeight);
data.clientHeight = clientHeight;
onMounted(() => {
  tuozhuai();
});

let tuozhuai = () => {
  let elleft = document.querySelector(".d1");
  let elright = document.querySelector(".d2");
  new Sortable(elleft, {
    group: "shared", // set both lists to same group
    animation: 150,
  });

  new Sortable(elright, {
    group: "shared",
    animation: 150,
  });
};

let control = (item) => {
  bus.emit("showDrag", 0); //按下的时候发送事件 让其余窗体恢复层级
  item.show = true;
};
let control2 = () => {
  data.show2 = true;
};
let btnName = computed(() => {
  return show.value ? `关闭窗口` : `打开窗口`;
});

// 正式请求
const sendHttpAxios = () => {
  login({ account: "admin", password: "123456" }).then((res) => {
    console.log(res);
  });
};
// mock模拟请求
const sendMockHttp = () => {
  mockLogin().then((res) => {
    console.log(res);
  });
};
</script>

<style lang="scss" scoped>
.main-container {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/images/3.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .d2 {
    padding: 10px;
    flex-wrap: wrap;
    .dock-item {
      cursor: pointer;
      padding: 15px 0px;
      text-align: center;
      width: 100%;
      .w50 {
        width: 50px;
        height: 50px;
        transition-property: width, height;
        transition-duration: 0.1s;
        transition-timing-function: linear;
      }
      .w50:hover {
        width: 65px;
        height: 65px;
      }
      .t {
        display: inline-block;
        color: #fff;
        margin-top: 5px;
        font-size: 13px;
      }
    }
  }
  .dock {
    width: 100%;
    position: fixed;
    bottom: 20px;
    .d1 {
      color: #fff;
      border-radius: 25px;
      height: 110px;
      padding-left: 25px;
      background-color: rgba(255, 255, 255, 0.3);
      .dock-item {
        cursor: pointer;
        margin-right: 25px;
        .w50 {
          width: 50px;
          height: 50px;
          transition-property: width, height;
          transition-duration: 0.1s;
          transition-timing-function: linear;
        }
        .w50:hover {
          width: 65px;
          height: 65px;
        }
        .t {
          display: inline-block;
          color: #fff;
          margin-top: 5px;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
